<template>
  <div class="current">
    <h2 class="h2"><font size="20">用户等级</font></h2>
    <hr/>
    <h3 class="h3" align="center">当前等级为: {{Math.floor(percentage/10)}} 级 </h3>
    <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage" :color="customColors"></el-progress>
    <!--<div>
      <el-button-group>
        <el-button icon="el-icon-minus" @click="decrease"></el-button>
        <el-button icon="el-icon-plus" @click="increase"></el-button>
      </el-button-group>
    </div>-->
    <hr/>
    <h3 class="h4" align="center">距离下一等级: {{Math.floor(percentage/10) + 1}} 级 还需听歌 10 首</h3>
    <hr/>
    <span>
      <h2 class="h2"> <font size="20">会员信息:  </font> <el-button type="success" class="button" @click="vip(userId)">会员充值</el-button></h2>
      <h3 class="h5">您是  <font size="8" color="#00ffff"> {{isVip}}</font></h3>
        </span>

    <div v-html="vipPay" ref="vipPay"></div>

  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "MyGrade",
    data() {
      return {
        //grade:this.$route.params.grade,
        percentage: this.$route.params.grade * 10,
        isVip: this.$route.params.isVip,
        userId:this.$route.params.userId,
        vipPay:'',

        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]
      }
    },
    methods: {
      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
      vip(userId){
        axios.get("http://127.0.0.1:8200/fancy-music-pay/pay?userId="+userId).then(res => {
          // alert(res.data)
          this.vipPay=res.data;
          this.$nextTick(() => {
            this.$refs.vipPay.children[0].submit()
          })
        })
      }
      /*increase() {
        //alert(this.grade);
        this.percentage += 5;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      },
      decrease() {
        this.percentage -= 5;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      }*/
    }
  }

</script>

<style scoped>

  .current {
    /*align: center;*/
    width: 100%;
  }

  .h3 {
    color: coral;
    font-family: 幼圆;
  }

  .h4 {
    color: dodgerblue;
    font-family: 幼圆;
  }

  .h2 {
    color: orangered;
    font-family: 楷体;
    size: 2px;
    /*align-self: center;*/
  }

  .h5 {
    color: dodgerblue;
    font-family: 幼圆;
    width: 1300px;
    float: right;
  }
</style>
